<template>
  <UpImage
    v-bind="props"
    @click="() => emit('click')"
    @load="() => emit('load')"
    @error="(err) => emit('error', err)"
  >
    <template v-slot:loading>
      <up-loading-icon></up-loading-icon>
    </template>
  </UpImage>
</template>

<script>
import { defineComponent, ref } from 'vue';
import props from 'uview-plus/components/u-image/props.js';
import UpImage from 'uview-plus/components/u--image/u--image.vue';

export default defineComponent({
  options: {
    // 微信小程序中 options 选项
    virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  components: {
    UpImage,
  },
  props: {
    ...props,
    errorImg: '',
  },
  emits: ['click', 'error', 'load'],
  setup(props, { emit }) {
    return {
      props,
      errorImg: props.errorImg,
      emit,
    };
  },
});
</script>

<style lang="scss"></style>
